<template>
  <div class="energy-consume-page">
    <div class="i-layout-page-header">
      <PageHeader
        :title="`${lang.currentSelect}: ${currentNode.title}`"
        content=""
        hidden-breadcrumb
      >
        <template #logo>
          <toolbarFloatMenu :show="menuShow">
            <recordTree
              :classObject="classObject"
              :className="className"
              :type="type"
              :modelType="modelType"
              :data="basicData"
              :addNewPanel="addNewPanel"
              :editPanel="editPanel"
              :readPanel="readPanel"
              @handleSelectNode="handleSelectNode"
              @handleNewAddSubmit="handleNewAddSubmit"
              @handleEditSubmit="handleEditSubmit"
            ></recordTree>
          </toolbarFloatMenu>
        </template>
      </PageHeader>
    </div>
    <recordChart
      class="record-chart"
      ref="recordChart"
      :ids="ids"
      :currentNode="currentNode"
      :addNewPanel="personBindPanel"
    ></recordChart>
  </div>
</template>
<script>
    import recordChart from './parts/recordChart.vue';
    import toolbarFloatMenu from '@/pages/components/toolbarFloatMenu.vue';
    import { typeClassName } from '../../config/classNameMap';
    import recordTree from './parts/recordTree.vue';
    export default {
        name: 'energyConsumeRecord',
        components: { recordChart, toolbarFloatMenu, recordTree },
        data () {
            return {
                addNewPanel: {
                    width: 1024,
                    zIndex: 100,
                    titleStyle: {},
                    drawer: {
                        show: false
                    },
                    cols: 2
                },
                editPanel: {
                    width: 1024,
                    zIndex: 100,
                    titleStyle: {},
                    drawer: {
                        show: false
                    },
                    cols: 2,
                    data: {}
                },
                readPanel: {
                    width: 1024,
                    zIndex: 100,
                    titleStyle: {},
                    drawer: {
                        show: false
                    },
                    cols: 2,
                    data: {}
                },
                personBindPanel: {
                    width: 1024,
                    zIndex: 100,
                    titleStyle: {},
                    drawer: {
                        show: false
                    },
                    cols: 2
                },
                currentNode: {
                    id: 'root',
                    title: '未选中'
                },
                menuShow: true,
                classObject: null, 
                className: typeClassName['energyStatistics'].className,
                type: typeClassName['energyStatistics'].type,
                modelType: typeClassName['energyStatistics'].modelType,
                ids: [] // 当前下属的ids
            };
        },
        computed: {
            lang () {
                return {
                    'en-US': {
                        currentSelect: 'current select'
                    },
                    'zh-CN': {
                        currentSelect: '当前选中'
                    }
                }[this.G_Locale];
            },
            basicData () {
                let basicData = [];
                if (
                    !!this.classObject.record &&
                    !!this.classObject.record.hier &&
                    !!this.classObject.record.hier[0]
                ) {
                    basicData = this.classObject.record.hier[0].basic;
                }
                return basicData;
            }
        },
        beforeMount () {
            this.classObject = this.$modelObject.create(this.modelType);
            this.getMenuList();
        },
        methods: {
            // 获取能耗项数据
            getMenuList () {
                let filter = {
                    className: this.className,
                    type: this.type
                };
                let newFilter = '';
                if (this.tools.isReal(filter)) {
                    newFilter = this.classObject.util.getFilter(filter);
                }
                this.loading = true;
                this.classObject.query(newFilter).then((flag) => {
                    if (flag) {
                        this.loading = false;
                    } else {
                        this.loading = false;
                    }
                });
            },
            handleSelectNode (currentNode) {
                this.currentNode = currentNode;
                this.ids = this.getChildrenPerson(currentNode.id).map((d) => d.id);
            },
            getChildrenPerson (parentId) {
                let list = this.basicData.filter(
                    (item) =>
                        item.parentId === parentId &&
                        item.pointer &&
                        item.pointer.className === typeClassName['person'].className
                );
                return list;
            },
            // 新增保存
            async handleNewAddSubmit (data) {
                //是否有新增确认条件且满足
                if(typeof(this.addCondition)==='function'&&!await this.addCondition(data)){
                    return;
                }
                let pointer = { className: this.className, type: this.type }
                let newData = {
                    ...data,
                    name: data.values.sf_name,
                    id: this.tools.uuid(8),
                    model: this.modelType,
                    parentId: this.currentNode.id,
                    pointer: {}
                }
                // 添加hier中某项的接口
                this.loading = true;
                this.classObject
                    .runAddRegister(pointer, { basic: [newData] })
                    .then((flag) => {
                        if (flag) {
                            this.loading = false;
                            this.$set(this.addNewPanel.drawer, 'show', false);
                        } else {
                            this.loading = false;
                        }
                });
            },
            // 编辑保存
            handleEditSubmit (data) {
                let pointer = { type: this.type, className: this.className };
                // 更新hier中某项的接口
                this.loading = true;
                this.classObject.runRegister(pointer, { basic: [data] }).then((flag) => {
                    if (flag) {
                        let index = this.classObject.record.hier[0].basic.findIndex(
                            (d) => d.id === this.currentNode.id
                        );
                        if (index !== -1) {
                            this.classObject.record.hier[0].basic.splice(index, 1, data);
                        }
                        this.loading = false;
                        this.$set(this.editPanel.drawer, 'show', false);
                    } else {
                        this.loading = false;
                    }
                });
            },
            /**
             * 新增确认时条件
             * 新增时生成编码流水号
             */
            async addCondition(data){
                let flag = true;
                let no = await this.$api.Common.getNextVal('enrecord')
                data.values['sf_code'] = no;
                return flag;
            }
        }
    };
</script>
<style lang="scss" scoped>
::v-deep .ivu-page-header-logo {
  font-size: 18px !important;
}
::v-deep .ivu-page-header-detail{
    display: flex;
}
.energy-consume-page{
    height: 100%;
}
.record-chart{
    overflow-y: auto;
    background: #fff;
}
@media screen and (max-width:720px){
    .record-chart{
        max-height: calc(100% - 400px);
    }
}
</style>
